import React, { Component } from 'react'
import { Container, Content, Input, Toast, Root } from 'native-base'
import Dialog, {
	DialogTitle,
	DialogFooter,
	DialogButton,
	ScaleAnimation
} from 'react-native-popup-dialog'
import { View, Text, TouchableOpacity, Clipboard, DeviceEventEmitter } from 'react-native'
import BindWX from './components/bindWX'
import HeaderWhite from '../../../components/header/headerWhite'
import TipsCom from '../../../components/dialog/tips'
import Forbiduser from '../../../components/forbiduser'
import commonStyle from '../../../libs/commonStyle'
import Iconfont from '../../../components/iconfont'
import { connect } from 'react-redux' // 引入connect函数
import * as commonAction from '../../../redux/actions/common'
import * as loginAction from '../../../redux/actions/login'
import API from '../../../api/request'

import { ruleFn } from './data'
class Withdraw extends Component {
	constructor(props) {
		super(props)
		this.state = {
			withdrawApiUrl: '/api/order/withdraw',
			inputValue: '',
			scaleAnimationDialog: false,
			dialogText: '',
			
			tipsVisible: false,
			tipsContent: ''
		}
	}
	componentWillMount() {
		this.props.bindInfo && this.props.bindInfo()
		DeviceEventEmitter.addListener('forbid.user', () => {
			global.Pop.show(<Forbiduser wechat={this.props.serviceInfo.wechat} />,{animationType: 'slide-up'})
		})
	}
	onWithdraw() {
		// 提现
		this.widthdrawHandle()
	}
	
	showTips(text) {
		this.setState({
			tipsVisible: true,
			tipsContent: text
		})
		setTimeout(() => {
			this.setState({
				tipsVisible: false
			})
		}, 1000)
	}
	
	copy(text, tips) {
		Clipboard.setString(String(text))
		this.showTips && this.showTips(tips)
	}

	async widthdrawHandle() {
		let { withdrawApiUrl, inputValue } = this.state
		let msg = '申请成功，等待审核付款，您可在 首页->累计提现 查看审核进度'

		if (Number(inputValue) % 1 !== 0) {
			msg = '请输入整数金额'
		} else {
			let res = await API.get(withdrawApiUrl, {
				withdrawMoney: Number(inputValue)
			})

			if (res && res.code === '200') {
				this.props.getHomeData && this.props.getHomeData()
			} else {
				msg = res.message || '申请提现提交失败'
			}
		}

		this.setState({
			scaleAnimationDialog: true,
			dialogText: msg
		})
	}
	render() {
		const { stat, serviceInfo, isBindWx } = this.props
		const { dialogText } = this.state
		return (
			<Root>
				<Container>
					<HeaderWhite title="我要提现" hasLeft />
					<Content>
						<Dialog
							onTouchOutside={() => {
								this.setState({ scaleAnimationDialog: false })
							}}
							width={0.9}
							visible={this.state.scaleAnimationDialog}
							dialogAnimation={new ScaleAnimation()}
							dialogTitle={
								<DialogTitle
									title={dialogText}
									hasTitleBar={false}
								/>
							}
							footer={
								<DialogFooter>
									<DialogButton
										text="确定"
										bordered
										onPress={() => {
											this.setState({
												scaleAnimationDialog: false
											})
										}}
										key="button-2"
									/>
								</DialogFooter>
							}
						/>
						<View style={[commonStyle.m20]}>
							<BindWX isBindWx={isBindWx}  wxPublic={this.props.wxPublicNumber}  />
							<View
								style={[
									commonStyle.border,
									commonStyle.shadowGray,
									commonStyle.mt30,
									commonStyle.backgroundColorGray
								]}
							>
								<View
									style={[
										commonStyle.backgroundColorWhite,
										commonStyle.p20
									]}
								>
									<Text> 提现金额（ 整数） </Text>
									<View
										style={[
											commonStyle.flexRow,
											commonStyle.flexVerticalCenter
										]}
									>
										<Iconfont
											name="money4"
											size={28}
											color="#999"
										/>
										<Input
											keyboardType="numeric"
											onChangeText={text => {
												this.setState({
													inputValue: text
												})
											}}
											placeholderTextColor={'#A5A5A5'}
											style={{
												fontSize: 14,
												marginTop: 5
											}}
											placeholder="提现金额，首次5元起，后续10元起"
										/>
									</View>
								</View>
								<Text
									style={[commonStyle.p20, { color: '#444' }]}
								>
									可提现金额
									<Iconfont name="money4" size={13} />
									<Text style={commonStyle.fontBold}>
										{(stat && stat.withdrawable) || '0.00'}
									</Text>
								</Text>
							</View>
						</View>
						<TouchableOpacity
							activeOpacity={1}
							style={[
								this.state.inputValue
									? commonStyle.activeBackgroundColor
									: commonStyle.backgroundColorGray,
								commonStyle.circle10,
								commonStyle.ml20,
								commonStyle.mr20,
								commonStyle.mt30,
								commonStyle.flexCenter,
								commonStyle.p30
							]}
							onPress={
								this.state.inputValue &&
								this.onWithdraw.bind(this)
							}
						>
							<Text
								style={[
									this.state.inputValue
										? commonStyle.colorWhite
										: commonStyle.colorGray
								]}
							>
								确定
							</Text>
						</TouchableOpacity>
						<View style={[commonStyle.pl20, commonStyle.pr20, commonStyle.mt40]}>
							<Text style={commonStyle.pb10}> 提现须知： </Text>
							{ruleFn(this.props.wxPublicNumber).map(item => {
								return (
									<Text
										key={item}
										style={[
											commonStyle.colorGray,
											commonStyle.pb10,
											{ lineHeight: 22 }
										]}
									>
										{item}
									</Text>
								)
							})}
						</View>
						<View style={[commonStyle.pl20, commonStyle.pr20, commonStyle.pb30]}>
							<TouchableOpacity
								onPress={() => {
									this.copy(serviceInfo.wechat, '已复制客服微信')
								}}
							>
							<Text>
								如有提现问题请添加客服微信：<Text style={[commonStyle.activeColor]}>{serviceInfo && serviceInfo.wechat}</Text>（点击可复制）
							</Text>
							</TouchableOpacity>
						</View>
						<TipsCom 
							onClose={() => {
								this.setState({
									tipsVisible: false
								})
							}}
							visible={this.state.tipsVisible} 
							content={this.state.tipsContent} />
					</Content>
				</Container>
			</Root>
		)
	}
}

export default connect(
	state => ({
		stat: state.login.homeData,
		isBindWx: state.common.isBindWx,
		serviceInfo: state.login.serviceInfo,
		wxPublicNumber: state.login.wxPublicNumber
	}),
	dispatch => ({
		bindInfo: () => dispatch(commonAction.bindInfo()),
		getHomeData: () => dispatch(loginAction.getHomeData())
	})
)(Withdraw)
